/* 获取元素 */
const tagsEl = document.getElementById("tags");
const textarea = document.getElementById("textarea");
/*textarea 获得焦点 */
textarea.focus();
/* 按键抬起事件 */
textarea.addEventListener("keyup", (e) => {
  createTags(e.target.value);

  if (e.key === "Enter") {
    setTimeout(() => {
      e.target.value = "";
    }, 10);

    randomSelect();
  }
});
/* 创建标签 */
function createTags(input) {
  /* 获取按下的字符按逗号分割成数组过滤出不等于空的在去除左右空格 */
  const tags = input
    .split(",")
    .filter((tag) => tag.trim() !== "")
    .map((tag) => tag.trim());

  tagsEl.innerHTML = "";

  tags.forEach((tag) => {
    /* 给每一个元素创建一个标签 */
    const tagEl = document.createElement("span");
    /* 添加上tag类样式 */
    tagEl.classList.add("tag");
    /* tagEl内容替换 */
    tagEl.innerText = tag;
    /* 往tagsEl里添加 */
    tagsEl.appendChild(tagEl);
  });
}
/* 随机选择 */
function randomSelect() {
  const times = 30;
  /* 开启定时器 */
  const interval = setInterval(() => {
    const randomTag = pickRandomTag();

    if (randomTag !== undefined) {
      highlightTag(randomTag);

      setTimeout(() => {
        unHighlightTag(randomTag);
      }, 100);
    }
  }, 100);

  setTimeout(() => {
    /* 清理定时器 */
    clearInterval(interval);

    setTimeout(() => {
      const randomTag = pickRandomTag();

      highlightTag(randomTag);
    }, 100);
  }, times * 100);
}
/* 选择随机的标签 */
function pickRandomTag() {
  const tags = document.querySelectorAll(".tag");
  return tags[Math.floor(Math.random() * tags.length)];
}

function highlightTag(tag) {
  /* tag元素添加上highlight类样式 */
  tag.classList.add("highlight");
}

function unHighlightTag(tag) {
  /* tag元素移除highlight类样式 */
  tag.classList.remove("highlight");
}
